<template>
	<view class="announcement">
		<view> 
			<view class="Notice" v-for="(item,index) in annouArr" :key='index' @click="datails(item.id)">
				<view v-if="item.length == 0">
					<view style="width: 232px;height: 242px;margin: 110px auto;">
						<image style="width: 100%;height: 100%;"
							src="https://clhy-img.oss-cn-beijing.aliyuncs.com/2023-04-07_image/9015d0e9f45344c4007d408cd271f6a.png" mode=""></image>
					</view>
				</view>
				<view class="cut-off">
					<view class="cut-offL">
						{{item.notice_leveltype_name}}
					</view>
					<view class="cut-offR">
						<view class="Effective" v-if="item.state == '有效期内'">
							有效
						</view>
						<view class="Effectives" v-else-if="item.state == '已失效'">
							失效
						</view>
						<view class="Effectives" v-else-if="item.state == '已作废'">
							作废
						</view>
						<view class="newEffective" v-else>
							待发
						</view>
						<view class="not" v-if="item.dot">
							未读
						</view>
						<view class="nots" v-else>
							已读
						</view>
					</view>
				</view>
				<view class="cut-offTxt">
					{{item.notice_name}}
				</view>
				<view class="urgent">
					<view class="PuTong" v-if="item.notice_type == 1">
						普通
					</view>
					<view class="JinJi" v-if="item.notice_type == 2">
						紧急
					</view>
					<view class="browse">
						浏览：{{item.notice_readnumber}}
					</view>
					<view class="time">
						{{item.begin_time}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				annouArr: [],
				pageIndex: 1,
				loading: false,
				nextPage: false,
				listData: [],
			}
		},
		onShow() {
			let _this = this
			if (uni.getStorageSync('phone')) {
				if (uni.getStorageSync('loginFlag')) {
					if (!uni.getStorageSync('hourseList')) {
						uni.showModal({
							title: '请先进行业主认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/my/address/address'
									})
								}
							}
						});
						this.$openInvite()
					} else {
						_this.showFlag = true
						_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
						_this.name = _this.homelist.proName;
						_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode + '-' +
							_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode
						_this.getannouData()
					}
				} else {
					uni.showModal({
						title: '请先实名认证',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								_this.$Router.push({
									path: '/homePage1/realName/realName'
								})
							}
						}
					});
				}
			} else {
				uni.showModal({
					title: '请先登录',
					showCancel: false,
					confirmText: '确认',
					confirmColor: '#F9A832',
					success: function(res) {
						if (res.confirm) {
							console.log('a')
							_this.$Router.pushTab({
								path: '/pages/user/user'
							})
						}
					}
				});
			}
			this.getannouData()
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
		},
		onPullDownRefresh() {
			this.getannouData();
		},
		methods: {
			datails(id) {
				uni.navigateTo({
					url: '/pages/authentication/datails?id=' + id
				})
			},
			//通知公告接口
			async getannouData() {
				if (this.pageIndex < 2) {
					uni.showLoading({
						title: '加载中'
					});
				}
				this.loading = false;
				let res = await this.$request.api.Notice({
					My_user_id: uni.getStorageSync('rawData').userId,
					pageIndex: 1,
					room_id: this.homelist.roomId,
				})
				if (this.pageIndex == 1) {
					this.annouArr = res.data.data.datalist || [];
				} else {
					this.annouArr = [...this.annouArr, ...res.data.data.datalist];
				}
				console.log(this.annouArr)
				this.nextPage = res.data.data.isEndPage
				this.loading = true;
				uni.hideLoading();
				uni.stopPullDownRefresh()
			}
		}
	}
</script>

<style lang="scss">
	.announcement {
		min-height: 200rpx;
		background-color: #f4f4f4;

		.Notice {
			width: 100%;
			min-height: 100rpx;
			margin-top: 20rpx;
			background-color: #FFFFFF;

			.cut-off {
				min-height: 110rpx;
				padding: 50rpx 27px 0;

				.cut-offL {
					width: 50%;
					float: left;
					font-size: 42rpx;
					line-height: 50rpx;
					font-weight: 700;
				}

				.cut-offR {

					width: 50%;
					float: right;
					font-size: 30rpx;
					text-align: center;
					line-height: 50rpx;

					.Effective {
						width: 31%;
						color: #fff;
						background-color: #46D345;
						border-radius: 5px;
						margin-right: 15px;
						float: right;
						line-height: 21px;
						font-size: 10px;
					}

					.Effectives {
						width: 31%;
						color: #fff;
						background-color: #666666;
						border-radius: 5px;
						margin-right: 15px;
						float: right;
						line-height: 21px;
						font-size: 10px;
					}

					.newEffective {
						width: 31%;
						color: #fff;
						background-color: #FFFF00;
						border-radius: 5px;
						margin-right: 15px;
						float: right;
						line-height: 21px;
						font-size: 10px;
					}

					.not {
						width: 25%;
						line-height: 19px;
						border: 1px #FD3636 solid;
						color: #FD3636;
						border-radius: 12px;
						margin-right: 9px;
						float: right;
						font-size: 10px;
						background-color: rgba(253, 54, 54, 0.1);
					}

					.nots {
						width: 30%;
						border: 2rpx #DDDDDD solid;
						color: #DDDDDD;
						border-radius: 25rpx;
						margin-right: 10rpx;
						float: right;
					}

					.not_item {
						width: 30%;
						border: 2rpx #999999 solid;
						color: #999999;
						border-radius: 25rpx;
						margin-right: 10rpx;
						float: right;
					}
				}
			}

			.cut-offTxt {
				font-size: 32rpx;
				line-height: 80rpx;
				color: #666666;
				padding: 10rpx 25px;
			}

			.urgent {
				height: 110rpx;
				font-size: 30rpx;
				padding: 10rpx 25px;
				color: #999999;

				.urgent_jin {
					float: left;
					padding: 0 20rpx;
				}

				.browse {
					float: left;
					padding: 0 20rpx;
				}

				.time {
					float: right;
					padding: 0 20rpx;
				}

				.JinJi {
					color: #FD3636;
					float: left;
				}

				.PuTong {
					color: #00ff00;
					float: left;
				}
			}
		}
	}
</style>